<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪元素选择器</title>
    <style>
      /* 什么是伪元素.---很像元素但不是元素,是元素中的一些特殊位置 */
      /*  需求:第一个英文字母大写红色  */
      .one::first-letter {
        color: red;
        font-size: 3em;
      }
      /* 当前一行给背景色 */
      .one::first-line {
        background-color: yellow;
      }
      /* 选中当前鼠标选中的文字 */
      .one::selection {
        background-color: aliceblue;
        color: aqua;
      }
      /* 选中input输入框中的提示文字 */
      input::placeholder {
        color: cadetblue;
      }
      /*  选中元素之前或者之后的位置,然后创建一个子元素*/
      /* 这种方式添加的无法被选中复制 */
      .money::before {
        content: "$";
        color: red;
        font-size: 2em;
      }
      .money::after {
        content: ".00";
      }
    </style>
  </head>
  <body>
    <div class="one">
      I wandered lonely as a cloud Wordsworth I wandered lonely as a cloud That
      floats on high o''er vales and hills, When all at once I saw a crowd, A
      host, of golden daffodils, Beside the lake, beneath the trees, Fluttering
      and dancing in the breeze. Continuous as the stars that shine And twinkle
      on the milky way, They stretch''d in never-ending line Along the margin of
      a bay: Ten thousand saw I at a glance Tossing their heads in sprightly
      dance. The waves beside them danced, but they Out-did the sparkling waves
      in glee:-- A Poet could not but be gay In such a jocund company! I
      gazed--and gazed--but little thought What wealth the show to me had
      brought; For oft, when on my couch I lie In vacant or in pensive mood,
      They flash upon that inward eye Which is the bliss of solitude; And then
      my heart with pleasure fills And dances with the daffodils.
    </div>
    <br />
    <input type="text" placeholder="请输入内容" />
    <br />
    <p class="money">144</p>
  </body>
</html>
